<template>
  <div class="bigbox">
    <!-- 盒子头部 -->
     <div class="topbox">
      <el-form ref="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="用电企业">
                  <FilterSelect2
                        v-model="form.orgNo"
                        :optionlist="qiyelist"
                        :valuekey="{ name: 'bizOrgName', value: 'bizOrgNo' }"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="报告日期">
                  <el-date-picker
                    v-model="value1"
                    size="small"
                    style="width: 100%;"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                 <el-form-item label="业务类型">
                  <el-select v-model="form.businessType" placeholder="请选择" size="small" style="width: 100%;">
                    <el-option v-for="(item,index) in yewulist" :key="index" :label="item.text" :value="item.value" class="options"></el-option>
                  </el-select>
                 </el-form-item>
              </el-col>
              <el-col :span="8" style="text-align: right;">
                <el-form-item label="">
                  <el-button size="small" @click="chongzhi">重 置</el-button>
                  <el-button  size="small" type="primary" @click="getdatalist()">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
     </div>
     <!-- 盒子主体 -->
     <div class="zhutibox">
        <!-- 封装导出/刷新/以及调节表格密度 -->
        <TopTitle @command="command" @daochu="daochu" 
        @shuaxin="shuaxin"></TopTitle>
        <!-- 封装表格区域 -->
        <div class="table">
           <TableColumn ref="TableColumn" :tableConfig="tableConfig"
           :tableData="tableData" :issize="iissize">
           <el-table-column label="操作" >
            <template #default="{row}">
              <el-button type="text"   @click="liulan(row)" >浏览</el-button>
              <el-button type="text"   @click="bianji(row)">编辑</el-button>
              <el-button type="text"   @click="tuisong(row)">推送</el-button>
            </template>
          </el-table-column>
          </TableColumn>
        </div>
        <!-- 底部分页 -->
        <div class="fenye">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="formlist._pageNo"
                :page-size="10"
                @current-change="getdatalist"
                :total="+totalCount">
              </el-pagination>
        </div>
     </div>
  </div>
</template>

<script>
import { getuserlistapi } from '@/api/analysis'
import { getloginuserapi, getyonghuxialaapi } from '@/api/cycle'
import { gettreelist, gettreexiaji } from '../../api/userscreen'
import { getbaogaolistapi ,exportbaoapi,posttuisongapi} from '@/api/inspection'
import { getyewuleiapi } from '@/api/guidelines'
import { saveAs } from 'file-saver'
import TopTitle from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTitle,
    TableColumn
},
  data() {
    return {
      bizOrgName:'',
      value1:[],
      form:{orgNo:''},
      qiyelist: [],
      iissize: 'medium',
      formlist: {
        _pageNo: 0,
        _pageSize:10
      },
      props: {
        label: 'bizOrgName',
      },
      tableData: [],
      yewulist: [],
      tableConfig: [
        { label: '序号', type: 'index',width: '100' ,center:'center' },
        { label: '用电企业', prop: 'orgName'},
        { label: '业务类型', prop: 'businessTypeName',center:'center'},
        { label: '报告名称', prop: 'reportName' },
        { label: '巡视日期', prop: 'tourDate',center:'center' },
        { label: '巡视人', prop: 'xsfzrName',center:'center'},
        { label: '巡视成员', prop: 'xscyName' ,center:'center'},
        { label: '最后修改人员', prop: 'lastOperatorName' ,center:'center'},
        { label: '最后修改时间', prop: 'lastOperateTime' ,center:'center'}
      ],
      totalCount:''
    };
  },

  async mounted() {
    this.gettime() 
    await this.getstartarr()
    this.getdatalist()
    const { data: { list } } = await getuserlistapi()
    this.qiyelist=list
  },

  methods: {
    // 封装获取表格数据
    async getdatalist() {
      this.$refs.TableColumn.loading=true
      const {data:{totalCount,list}} = await getbaogaolistapi({
        _pageNo: this.formlist._pageNo - 1, _pageSize: this.formlist._pageSize,
        startDate: this.value1[0], endDate: this.value1[1],
        ...this.form
      })
      this.totalCount = totalCount
      this.tableData = list
      this.$refs.TableColumn.loading=false
     },
    // 表格浏览功能
    liulan(val) {
      this.$store.commit('settaskod', val.taskId)
      this.$router.push(`/browse/${val.id}`)
    },
    // 表格编辑功能
    bianji(val) {
      this.$store.commit('settaskod', val.taskId)
      this.$router.push({
        path: '/browse',
        query: { id:val.id ,name:'bianji'}
      })
    },
    // 表格推送功能
    async tuisong(val) {
      await posttuisongapi({ id: val.id })
      this.$message.success('操作成功')
      this.getdatalist()
    },
       // 调节表格密度
       command(val) {
      if (val === '默认') {
        this.iissize = 'medium'
      } else if (val === '中等') {
        this.iissize = 'small'
      } else {
        this.iissize = 'mini'
      }
    },
    // 导出
    async daochu() {
      const res = await exportbaoapi({
        _pageNo: this.formlist._pageNo - 1, _pageSize: this.formlist._pageSize,
        startDate: this.value1[0], endDate: this.value1[1],
        ...this.form,isParams: true
      })
      const blobContent = new Blob([res])
      let url = window.URL.createObjectURL(blobContent)
      saveAs(url, '巡视工单.xls')
     },
    // 刷新
    shuaxin() {
      this.getdatalist()
      this.$message.success('列表刷新成功')
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate()<10?'0'+date.getDate():date.getDate()
      this.value1=[]
      this.value1.push(year + '-' + '01' + '-' + '01')
      this.value1.push(year+'-'+month+'-'+day)
    },
    // 获取初始化数据
    async getstartarr() {
      const ress = await getyewuleiapi({ dictType: 'XSGL_ZYZDSLX' })
    this.yewulist = ress.data.list
    },
    // 重置
    async chongzhi() {
      this.form.businessType = ''
      this.form.orgNo=''
      this.gettime() 
      await this.getstartarr()
      this.getdatalist()
    }
  },
};
</script>

<style lang="scss" scoped>
.option{
  height: auto;
}
.options{
  padding-left: 10px;
}
.bigbox{
  background-color: #f1f1f1;
  padding: 10px;
  height: 100%;
    .topbox{
      height: 80px;
      background-color: #fff;
      padding: 20px;
    }
    .zhutibox{
      margin-top: 10px;
      padding: 20px;
      background-color: #fff;
      height:calc(100% - 90px);
      position: relative;
      .table{
        height: 90%;
        margin:  10px 0;
      }
      .fenye{
        position: absolute;
        bottom: 10px;
        right: 20px;
      }
    }
 
}
</style>